<template>
  <div class="bom-card">
      <div class="title">
        <div class="title-left">
          <div class="title-left-active">销售额</div>
          <div>访问量</div>
        </div>
        <div class="title-right">
          <div class="fast-time">
            <span>今日</span>
            <span>本周</span>
            <span>本月</span>
            <span class="fast-time-active">今年</span>
          </div>
          <div>
            <el-date-picker
              size='small'
              v-model="value2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="value">
         <div id="data-chart" :style="{width: '840px' , height: '270px'}"/>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value2: ''
    }
  },
  mounted () {
    this.initEchars()
  },
  methods: {
    // echarts初始化
    initEchars () {
      const chartDom = document.getElementById('data-chart')
      const chart = this.$echarts.init(chartDom)
      chart.setOption({
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{
          type: 'bar',
          data: [400, 420, 350, 450, 330, 350, 290, 500, 480, 299, 399, 486],
          barWidth: '50%'
        }],
        color: '#54A2D5'
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.bom-card{
  height: 290px;
  background-color: #fff;
  margin-top: 20px;
  .title{
    height: 50px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    .title-left{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 50px;
      color: #909399;
      .title-left-active{
        color: #303133;
        border-bottom: 2px solid #409EFF;
      }
      &>div{
        width: 80px;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      &>div:nth-child(1){
        margin-right: 30px;
      }
    }
    .title-right{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 20px;
      .fast-time{
        margin-right: 20px;
        .fast-time-active{
          background-color:#409EFF;
          color: #FFF;
        }
        &>span{
          display: inline-block;
          height: 30px;
          width: 54px;
          line-height: 30px;
          font-size: 12px;
          text-align: center;
          border: 1px solid #eee;
        }
        &>:nth-child(1){
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        &>:last-child{
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
    }
  }
}
</style>
